<!--
 * @Author: wb_wangjiudeng wb_wangjiudeng@tcl.com
 * @Date: 2025-05-25 17:51:39
 * @LastEditors: wb_wangjiudeng wb_wangjiudeng@tcl.com
 * @LastEditTime: 2025-06-02 22:08:51
 * @FilePath: \iam-ui\src\views\disciplinary\workOrder\components\AssetDrawer.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <common-drawer
    :visible="visible"
    :title="drawerTitle"
    :size="800"
    :destroy-on-close="true"
    @update:visible="emit('update:visible', $event)"
    @close="handleClose"
  >
    <div>
      <el-row :gutter="20">
        <el-col :span="12">
          <span class="label">工单来源：</span>
          <span class="value">{{ assetData?.source || "-" }}</span>
        </el-col>

        <el-col :span="12">
          <span class="label">工单编号：</span>
          <span class="value">{{ assetData?.workOrderNumber || "-" }}</span>
        </el-col>

        <el-col :span="24">
          <span class="label">工单主题：</span>
          <span class="value">{{ assetData?.workOrderSubject || "-" }}</span>
        </el-col>

        <el-col :span="12">
          <span class="label">办理期限：</span>
          <span class="value">{{ assetData?.handlingDeadline || "-" }}</span>
        </el-col>

        <el-col :span="12">
          <span class="label">签收日期：</span>
          <span class="value">{{ assetData?.receiptDate || "-" }}</span>
        </el-col>
      </el-row>
      <el-col :span="24" style="width: 100%; display: flex">
        <span class="label">督办单位：</span>
        <div class="value">
          <el-select
            v-model="superviseUnit"
            placeholder="请选择"
            style="width: 240px"
            multiple
          >
            <el-option
              v-for="item in superviseUnitList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </el-col>
      <el-col :span="24" style="width: 100%">
        <div class="label">工单内容：</div>
        <div style="margin-top: 10px">
          <template v-if="props.type === 'view' || props.type === 'supervise'">
            <el-input
              v-model="desc"
              style="width: 100%"
              :rows="6"
              type="textarea"
              placeholder="请输入内容"
              disabled
            />
          </template>
          <template v-else>
            <el-input
              v-model="desc"
              style="width: 100%"
              :rows="6"
              type="textarea"
              placeholder="请输入内容"
            />
          </template>
        </div>
      </el-col>
      <el-col
        :span="24"
        style="width: 100%; display: flex; margin-top: 24px; text-align: end"
      >
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit">
          {{ props.type === "reply" ? "回复" : "督办" }}
        </el-button>
      </el-col>
    </div>
  </common-drawer>
</template>

<script setup>
import { computed, onMounted, ref } from "vue";
import CommonDrawer from "@/components/CommonDrawer.vue";
import { supervision, reply } from "@/api/workOrder";
import useUserStore from "@/store/modules/user";
import { ElMessage } from "element-plus";
import { getCommunityList } from "../services";

const userStore = useUserStore();

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
  },
  type: {
    type: String,
    required: true,
    validator: (value) => ["view", "reply"].includes(value),
  },
  assetData: {
    type: Object,
    required: true,
    default: () => ({}),
  },
});
const emit = defineEmits(["update:visible"]);

const superviseUnit = ref("");
const superviseUnitList = ref([]);
const desc = ref(props.assetData?.workOrderContent || "");
const workOrderContent = computed({
  get: () => props.assetData?.workOrderContent || "",
});

onMounted(async () => {
  const res = await getCommunityList();
  if (res.code === 200 && Array.isArray(res.rows)) {
    superviseUnitList.value = res.rows.map((item) => ({
      label: item.departmentName,
      value: item.id,
    }));
  }
});

// 抽屉标题
const drawerTitle = computed(() => {
  const titles = {
    view: "工单详情",
    reply: "工单回复",
    supervise: "工单督办",
  };
  return titles[props.type] || "";
});
// 关闭抽屉
const handleClose = () => {
  emit("update:visible", false);
};
const handleSubmit = async () => {
  if (props.type === "reply") {
    if (!desc.value.trim()) {
      ElMessage.error("回复内容不能为空");
      return;
    }
    const res = await reply({
      orderId: props.assetData.id,
      replyContent: desc.value,
      departmentId: userStore.dept.deptId,
    });
    if (res.code !== 200) {
      ElMessage.error("回复失败: " + res.message);
      return;
    }
    ElMessage.success("回复成功");
  } else if (props.type === "supervise") {
    const res = await supervision({
      workOrdersId: props.assetData.id,
      departmentIds: superviseUnit.value.join(","),
    });
    if (res.code !== 200) {
      ElMessage.error("督办失败: " + res.message);
      return;
    }
    ElMessage.success("督办成功");
  }
  emit("update:visible", false);
  desc.value = "";
};
</script>

<style lang="scss" scoped>
:deep(.el-col-12) {
  padding: 12px;
}
</style>
